import React from 'react';
import {NavLink,Outlet} from 'react-router-dom';

export default function Home() {
	/* 
		由于在路由表中注册了路由之后使用Outlet指定路由展示区
		子组件的to有三种写法
			1,to="/home/news" 可以跳转到home组件下面的news组件
			2,to="./news" 相当于 to="news" 相当于第一种
			3,to="/news" 此写法无法访问到home下的news因为带有/默认从根路径开始跳转
	*/
	return (
		<div>
			<h2>Home组件内容</h2>
			<div>
				<ul className="nav nav-tabs">
					<li>
						<NavLink to="/home/news" >News</NavLink>
					</li>
					<li>
						<NavLink to="/home/message">message</NavLink>
					</li>
				</ul>
				{/* 子组件展示区 */}
				<Outlet/>
			</div>
		</div>
	);
}
